<template>
  <plain-page>
    <el-card shadow="never" body-style="padding: 8px 16px 16px;">
      <div class="container">
        <div class="header">
          <h1>{{d.realName || d.aliasName}}</h1>
          <div class="operations">
            <el-button
              v-auth="'/smart_info_center/life/user/user/user.update'"
              type="text"
              size="medium"
              icon="el-icon-edit"
              @click="$refs.userOperations.command('user-edit', d)"
              style="margin-right: 16px;padding: 0;"
              >修改</el-button>
              <user-operations ref="userOperations" :user="d" link :openTab="openTab" />
          </div>
        </div>
        <div class="table">
          <el-row>
            <el-col :span="2">
              <label>姓名</label>
            </el-col>
            <el-col :span="4" class="content">
              <i-content :text="d.realName" />
            </el-col>
            <el-col :span="2">
              <label>昵称</label>
            </el-col>
            <el-col :span="4" class="content">
              <i-content :text="d.aliasName" />
            </el-col>
            <el-col :span="3">
              <label>性别</label>
            </el-col>
            <el-col :span="1" class="content">
              <i-content :text="d.gender" />
            </el-col>
            <el-col :span="2">
              <label>生日</label>
            </el-col>
            <el-col :span="3" class="content">
              <i-content :text="d.birthday" />
            </el-col>
            <el-col :span="2">
              <label>年龄</label>
            </el-col>
            <el-col :span="1" class="content align-end">
              <i-content :text="d.age" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="2">
              <label>社区</label>
            </el-col>
            <el-col :span="4" class="content">
              <i-content :text="d.orgName" />
            </el-col>
            <el-col :span="2">
              <label>联系电话</label>
            </el-col>
            <el-col :span="4" class="content">
              <i-content :text="d.telphone" />
            </el-col>
            <el-col :span="3">
              <label>注册时间</label>
            </el-col>
            <el-col :span="3" class="content align-end">
              <i-content :text="d.registerTime" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="2">
              <label>用户类型</label>
            </el-col>
            <el-col :span="4" class="content">
              <i-content :text="DictMan.itemMap('user.type')[d.userType]" />
            </el-col>
            <template v-if="[2, 9].includes(d.userType)">
              <el-col :span="2">
                <label>{{{2: '会员卡号', 9: '设备编号'}[d.userType]}}</label>
              </el-col>
              <el-col :span="4" class="content">
                <i-content :text="d.deviceCode" />
              </el-col>
            </template>
            <template v-if="d.isvalid != null && !d.isvalid">
              <el-col :offset="[2, 9].includes(d.userType) ? 0 : 6" :span="3">
                <label>用户状态</label>
              </el-col>
              <el-col :span="2" class="content">
                <i-content :class="{danger: !d.isvalid}" :text="d.isvalid ? '启用' : '禁用'" />
              </el-col>
            </template>
          </el-row>
          <el-row>
            <el-col :span="2">
              <label>调访类别</label>
            </el-col>
            <el-col :span="10" class="content">
              <i-content :text="d.visitType" />
            </el-col>
            <el-col :span="3">
              <label>首次调访日期</label>
            </el-col>
            <el-col :span="5" class="content">
              <i-content :text="d.firstVisitDate" />
            </el-col>
          </el-row>
          <el-row>
          <el-col :span="2">
            <label>身份证号</label>
          </el-col>
          <el-col :span="4" class="content">
            <i-content :text="d.idcard" />
          </el-col>
            <el-col :span="2">
              <label>民族</label>
            </el-col>
            <el-col :span="4" class="content">
              <i-content :text="d.nation" />
            </el-col>
            <el-col :span="3">
              <label>户籍所在地</label>
            </el-col>
            <el-col :span="5" class="content">
              <i-content :text="d.domicileLocation" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="2">
              <label>社保卡号</label>
            </el-col>
            <el-col :span="4" class="content">
              <i-content :text="d.ssn" />
            </el-col>
            <template v-if="d.elderlyCard">
              <el-col :span="2">
                <label>老年卡证号</label>
              </el-col>
              <el-col :span="4" class="content">
                <i-content :text="d.elderlyCard" />
              </el-col>
            </template>
          </el-row>
          <el-row>
            <el-col :span="2">
              <label>文化程度</label>
            </el-col>
            <el-col :span="4" class="content">
              <i-content :text="d.educationLevel" />
            </el-col>
            <el-col :span="2">
              <label>宗教信仰</label>
            </el-col>
            <el-col :span="4" class="content">
              <i-content :text="d.hasFaith" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="2">
              <label>婚姻状况</label>
            </el-col>
            <el-col :span="4" class="content">
              <i-content :text="d.maritalStatus" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="2">
              <label>居住地址</label>
            </el-col>
            <el-col :span="10" class="content">
              <i-content :text="d.address" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="2">
              <label>紧急联系人</label>
            </el-col>
            <el-col :span="4" class="content">
              <i-content :text="d.name" />
            </el-col>
            <el-col :span="2">
              <label>联系电话</label>
            </el-col>
            <el-col :span="4" class="content">
              <i-content :text="d.contactTel" />
            </el-col>
            <el-col :span="3">
              <label>与服务对象的关系</label>
            </el-col>
            <el-col :span="5" class="content">
              <i-content :text="d.urgentContactPersonRelation" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="2">
              <label>联系人地址</label>
            </el-col>
            <el-col :span="10" class="content">
              <i-content :text="(d.urgentContactPersonArea || '') + (d.urgentContactPersonAddress || '')" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="2">
              <label>医疗费支付</label>
            </el-col>
            <el-col :span="10" class="content">
              <i-content :text="d.paidMedicalExpenses" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="2" class="rowspan-2">
              <label>服务对象</label>
            </el-col>
            <el-col :span="22" class="inner rowspan-2 ">
              <el-row>
                <el-col :span="2">
                  <label>特殊老人</label>
                </el-col>
                <el-col :span="16" class="content">
                  <i-content :text="d.specialTypes" auto-width />
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="2">
                  <label>能力评估</label>
                </el-col>
                <el-col :span="3" class="content">
                  <i-content :text="d.ability" />
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row v-if="d.isCityAllowanceTarget">
            <el-col :span="2">
              <label>评估对象</label>
            </el-col>
            <el-col :span="22" class="inner">
              <el-row>
                <el-col :span="2">
                  <label>评估状态</label>
                </el-col>
                <el-col :span="2" class="content">
                  <i-content :text="d.cityAllowanceEvalStatus" />
                </el-col>
                <el-col :span="2">
                  <label>评估分数</label>
                </el-col>
                <el-col :span="2" class="content">
                  <i-content :text="d.cityAllowanceEvalScore" />
                </el-col>
                <el-col :span="3">
                  <label>拟享受市补贴</label>
                </el-col>
                <el-col :span="2" class="content">
                  <i-content :text="d.cityAllowanceAmount" />
                </el-col>
                <el-col :span="2">
                  <label>评估机构</label>
                </el-col>
                <el-col :span="9" class="content align-end">
                  <i-content :text="d.cityAllowanceEvalOrgan" />
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="2">
              <label>居住状况</label>
            </el-col>
            <el-col :span="2" class="content">
              <i-content :text="d.liveStatus" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="2" class="rowspan-5">
              <label>健康状况</label>
            </el-col>
            <el-col :span="22" class="inner rowspan-5">
              <el-row>
                <el-col :span="2">
                  <label>慢性疾病</label>
                </el-col>
                <el-col :span="11" class="content">
                  <i-content :text="d.disease" auto-width />
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="2">
                  <label>重大疾病</label>
                </el-col>
                <el-col :span="3" class="content">
                  <i-content :text="d.hasMajorDisease" />
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="2">
                  <label>重疾办理</label>
                </el-col>
                <el-col :span="3" class="content">
                  <i-content :text="d.majorDiseaseHandled" />
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="2">
                  <label>康复状况</label>
                </el-col>
                <el-col :span="3" class="content">
                  <i-content :text="d.recoveryStatus" />
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="2">
                  <label>残障</label>
                </el-col>
                <el-col :span="3" class="content">
                  <i-content :text="d.disability" auto-width />
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="2" class="rowspan-2">
              <label>养老服务需求</label>
            </el-col>
            <el-col :span="22" class="inner">
              <el-row>
                <el-col :span="2">
                  <label>居家养老</label>
                </el-col>
                <el-col :span="11" class="content">
                  <i-content :text="d.homeCareNeeds" auto-width />
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="2">
                  <label>机构养老</label>
                </el-col>
                <el-col :span="3" class="content">
                  <i-content :text="d.orgCareNeed" />
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="2">
              <label>兴趣爱好</label>
            </el-col>
            <el-col :span="11" class="content">
              <i-content :text="d.hobbies" auto-width />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="2">
              <label>特长技能</label>
            </el-col>
            <el-col :span="2" class="content">
              <i-content :text="d.hasSkill" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="2">
              <label>志愿者参与</label>
            </el-col>
            <el-col :span="11" class="content">
              <i-content :text="d.volunteerServiceCategories" auto-width />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="2" class="rowspan-2">
              <label style="line-height: unset;">对社区居家养老需求与建议</label>
            </el-col>
            <el-col :span="11" class="content rowspan-2">
              <i-content :text="d.homeCareProposal" :class="{'long-text': d.homeCareProposal}" auto-width />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="2" class="rowspan-2">
              <label>备注及补充</label>
            </el-col>
            <el-col :span="11" class="content rowspan-2">
              <i-content :text="d.remark" :class="{'long-text': d.remark}" auto-width />
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
  </plain-page>
</template>
      
<script>
import IContent from './IContent';
import UserOperations from '../UserOperations';

export default {
  pageProps: {
    title: ({params, subTitle}) => {
      const TITLE = '用户详情';
      return params.user ? subTitle(params.user.realName || params.user.aliasName, TITLE) : TITLE;
    }
  },
  components: {
    IContent,
    UserOperations
  },
  data() {
    return {
      d: {}
    };
  },
  mounted() {
    this.userId = this.$params.user && this.$params.user.id || this.$params.userId;
    this.load();
    this.$pageEventBus.on('user-update', (sourcePage, userId) => {
      if (userId == this.userId) {
        if (this.isCurrent) {
          this.load(true);
        } else {
          this.reloadOnResumeNeed = true;
        }
      }
    });
  },
  methods: {
    async load(isReload) {
      let ret = await this.$http.get('/api/user/details', {params: {userId: this.userId}});
      let details = {...ret.basic, ...ret.customer, ...ret.readable};
      details.isCityAllowanceTarget = ret.customer
        && ret.customer.specialTypes
        && ret.customer.specialTypes.indexOf('21') > -1;
      if (isReload) {
        Object.assign(this.d, details);
      } else {
        this.d = details;
      }
    },
    onPageResume() {
      if (this.reloadOnResumeNeed) {
        this.load(true);
        this.reloadOnResumeNeed = false;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card {
  margin: 0 auto;
  min-width: 1234px;
  max-width: 1270px;
}

$col-min-height: 32px;

.container {
  margin: 0 auto;
  border-radius: 4px;

  .header {
    position: relative;
    margin: 0px;
    height: 26px;
    text-align: center;

    > h1 {
      font-size: 20px;
      margin: 0;
      padding: 0;
    }
    
    > .operations {
      position: absolute;
      right: 0px;
      top: 5px;
    }
  }

  .table {

    .el-row {
      margin-top: 16px;

      .el-col {
        height: $col-min-height;
        line-height: $col-min-height;
        min-height: $col-min-height;
        
        > label {
          display: block;
          margin-right: 8px;
          padding: 0px 4px;
          height: 100%;
          text-align: center;
          font-size: 14px;
          color: #606266;
          background-color: #F4F8FE;
          border-radius: 4px;
        }

        &.content {
          padding-right: 16px;
          font-size: 14px;

          .danger {
            background-color: #fef0f0;
            border-color: #fde2e2;
            color: #f56c6c;
          }

          &.align-end {
            padding-right: 8px;
          }
        }

        &.rowspan-2 {
          height: $col-min-height * 2;

          > label {
            line-height: $col-min-height * 2;
          }
        }

        &.rowspan-3 {
          height: $col-min-height * 3;

          > label {
            line-height: $col-min-height * 3;
          }
        }

        &.rowspan-4 {
          height: $col-min-height * 4;

          > label {
            line-height: $col-min-height * 4;
          }
        }

        &.rowspan-5 {
          height: $col-min-height * 5;

          > label {
            line-height: $col-min-height * 5;
          }
        }

        &.inner {
          padding-left: 0px;

          .el-row {
            margin-top: 0px;
          }
        }
      }
    }
  }
}


.long-text {
  height: 65px;
  resize: none;
}
</style>